<template>
  <view class="component-container" @click="isOpen = !isOpen">
    <slot name="open">
      <image src="./icon/open.svg" :style="{ width: size, height: openIconHeight }" v-show="isOpen" />
    </slot>
    <slot name="close">
      <image
        src="./icon/close.svg"
        :style="{ width: size, height: closeIconHeight }"
        mode="scaleToFill"
        v-show="!isOpen"
      />
    </slot>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps({
  size: {
    type: String,
    default: '30px'
  }
})
// 眼睛是睁开还是闭合
const isOpen = ref(false)
defineExpose({ isOpen })

function getUnit(value: string): string | null {
  const unitMatch = value.match(/[a-zA-Z%]+/)
  return unitMatch ? unitMatch[0] : null
}
// vars style
const openIconHeight = ref(parseFloat(props.size) * (3 / 4) + getUnit(props.size)!)
const closeIconHeight = ref(parseFloat(props.size) / 2 + getUnit(props.size)!)
</script>

<style scoped lang="scss">
.component-container {
  display: inline-block;
  width: v-bind(size);
}
</style>
